<% s_or_b = type.chars.first %>

<div id="<%= type %>" data-hook="address_fields">
  <div class="form-group <%= "#{type}-row" %>">
    <%= f.label :firstname, Spree.t(:first_name) %>
    <%= f.text_field :firstname, class: 'form-control' %>
  </div>

  <div class="form-group <%= "#{type}-row" %>">
    <%= f.label :lastname, Spree.t(:last_name) %>
    <%= f.text_field :lastname, class: 'form-control' %>
  </div>

  <% if Spree::Config[:company] %>
    <div class="form-group <%= "#{type}-row" %>">
      <%= f.label :company, Spree.t(:company) %>
      <%= f.text_field :company, class: 'form-control' %>
    </div>
  <% end %>

  <div class="form-group <%= "#{type}-row" %>">
    <%= f.label :address1, Spree.t(:street_address) %>
    <%= f.text_field :address1, class: 'form-control' %>
  </div>

  <div class="form-group <%= "#{type}-row" %>">
    <%= f.label :address2, Spree.t(:street_address_2) %>
    <%= f.text_field :address2, class: 'form-control' %>
  </div>

  <div class="form-group <%= "#{type}-row" %>">
    <%= f.label :city, Spree.t(:city) %>
    <%= f.text_field :city, class: 'form-control' %>
  </div>

  <div class="form-group <%= "#{type}-row" %>">
    <%= f.label :zipcode, Spree.t(:zip) %>
    <%= f.text_field :zipcode, class: 'form-control' %>
  </div>

  <div class="form-group <%= "#{type}-row" %>">
    <%= f.label :country_id, Spree.t(:country) %>
    <span id="<%= s_or_b %>country">
      <%= f.collection_select :country_id, available_countries, :id, :name, {}, { class: 'select2' } %>
    </span>
  </div>

  <div class="form-group <%= "#{type}-row" %>">
    <%= f.label :state_id, Spree.t(:state) %>
    <span id="<%= s_or_b %>state">
      <%= f.text_field :state_name,
            style: "display: #{f.object.country.states.empty? ? 'block' : 'none' };",
            disabled: !f.object.country.states.empty?, class: 'form-control state_name' %>
      <%= f.collection_select :state_id, f.object.country.states.sort, :id, :name, { include_blank: true }, { class: 'select2', style: "display: #{f.object.country.states.empty? ? 'none' : 'block' };", disabled: f.object.country.states.empty? } %>
    </span>
  </div>

  <div class="form-group <%= "#{type}-row" %>">
    <%= f.label :phone, Spree.t(:phone) %>
    <%= f.phone_field :phone, class: 'form-control' %>
  </div>
</div>

<% content_for :head do %>
  <%= javascript_tag do %>
    $(document).ready(function(){
      $('span#<%= s_or_b %>country .select2').on('change', function() { update_state('<%= s_or_b %>'); });
    });
  <% end %>
<% end %>
